import React from "react";
import { pokemonApi, useGetPokemonByNameQuery } from "../services/pokemon";
import style from "./Pokemon.module.css";

const Pokemon = ({ name }: { name: string }) => {
  const {
    data: pokemon,
    error,
    isError,
    isLoading,
    isFetching,
    refetch,
  } = useGetPokemonByNameQuery(name);
  /*  console.log(
    "useQuery:",
    pokemonApi.endpoints.getPokemonByName.useQuery("rnm") // 可以手动获取数据
  );*/
  console.log(
    "useQuery:",
    pokemonApi.endpoints.getPokemonByName.useQuery("pikachu")
  );
  if (isError) {
    return <p>Something bad just happened!</p>;
  }
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
      }}
      className={style.pokemonCard}
    >
      {isLoading || isFetching ? (
        <p>Wait, loading...</p>
      ) : (
        <>
          <h3>{pokemon?.name}</h3>
          <img src={pokemon?.img} alt="pokemon ico" />
          <button onClick={refetch}>refresh</button>
        </>
      )}
    </div>
  );
};

export default Pokemon;
